<template>
  <div>
    <a-modal cancelText="取消" okText="确定" :width="828" title="考勤详情" v-model="visible" @ok="handleOk">
      <!-- title -->
      <a-row class="detail_title mg_b16" type="flex" align="middle" justify="space-between">
        <a-col
          >姓名: <span class="mg_l10">{{ obj.empInfoName }}</span>
        </a-col>
        <a-col v-if="false">
          日期:
          <a-month-picker :defaultValue="moment(queryDate.yearlyMonthly, 'YYYY-MM')" class="mg_l10" @change="onChange" />
        </a-col>
      </a-row>
      <div class="detail_out">
        <a-row v-for="(item, y) in dataMonth" :key="y" class="mg_b16 card" type="flex" aling="middle">
          <a-col>
            <a-row class="bf" style="height: 46px;" />
            <a-row class="pd_10 bf" v-for="(tit, j) in item.period" :key="j">
              {{ tit }}
            </a-row>
          </a-col>
          <a-col class="item-box" v-for="(list, k) in item.dailyDateList" :key="k">
            <a-row class="item_title"> {{ list.yearly }}-{{ list.monthly }}-{{ list.daily }} </a-row>
            <a-row v-for="(everyItem, l) in list.dailyStatusList" :key="l" class="t_a_c pd_10 item_item">
              <a-col @click.stop="changeState(everyItem, dataMonth[y].dailyDateList[k])">
                <span class="tc-theme t_a_c cursor" v-if="everyItem.workStatus == 0">缺卡</span>
                <span class="t_a_c tc-theme cursor" v-if="everyItem.workStatus == 2">迟到</span>
                <span class="t_a_c tc-theme cursor" v-if="everyItem.workStatus == 3">早退</span>
                <span class="t_a_c tc-theme cursor" v-if="everyItem.workStatus == 6">异常</span>
              </a-col>
              <span class="cursor" v-if="everyItem.workStatus == 1">正常</span>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </a-modal>
    <a-modal
      :destroyOnClose="true"
      class="mg_t20"
      title="修改打卡详情"
      v-model="visible2"
      @ok="changeDetail"
      okText="确认"
      cancelText="取消"
    >
      <a-radio-group name="radioGroup" v-model="value">
        <a-radio :value="1">正常</a-radio>
        <a-radio :value="2">迟到</a-radio>
        <a-radio :value="3">早退</a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>

<script>
import { Check, CheckCard } from "@/api/check";
export default {
  props: {
    cardOption: {
      type: Object,
      default: () => ({
        show: false,
        id: "",
        obj: {}
      })
    }
  },
  data() {
    return {
      obj: {},
      id: "",
      value: 1,
      visible: false,
      visible2: false,
      queryDate: {},
      dataMonth: [],
      changeData: null
    };
  },

  watch: {
    cardOption(val) {
      this.visible = val.show;
      this.id = val.id;
      this.obj = val.obj;

      this.queryDate = {
        peopleMonthlyStatId: val.id
      };
      if (this.queryDate) {
        this.getYearlyMonthly(this.queryDate);
      }
    },
    deep: true
  },

  methods: {
    changeState(e, d) {
      this.visible2 = true;
      this.changeData = { ...e, ...d };
    },
    /* changeDetail */
    changeDetail() {
      this.visible2 = false;
      this.changeData.workStatus = this.value;
      this.changeData.empInfoId = this.obj.empInfoId;
      Check({
        url: CheckCard.putCardMonth,
        data: this.changeData,
        method: "PUT"
      }).then(data => {
        if (data.success) {
          this.$notification["success"]({ message: "修改成功" });
          this.visible = false;
        }
      });
    },
    /* 获取打卡年月日 */
    getYearlyMonthly(query) {
      Check({
        url: CheckCard.punchCardMonthLists,
        params: query
      }).then(({ data }) => {
        data.forEach(item => {
          item.period = item.period.replace(/;/g, "-").split("-");
        });
        data.sort((a, b) => a.period.length - b.period.length);
        this.dataMonth = data;
      });
    },
    /* ok */
    handleOk(e) {
      this.visible = false;
    },
    /* 时间 */
    onChange(date, dateString) {
      if (dateString) {
        this.queryDate.yearlyMonthly = dateString;
      } else {
        this.queryDate.yearlyMonthly = "";
      }

      this.getYearlyMonthly(this.queryDate);
    }
  }
};
</script>
<style lang="scss" scoped>
.detail_title {
  border-bottom: 1px solid #ccc;
  padding: 20px 0 40px 0;
}
.detail_out {
  margin-top: 10px;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
.item-box {
  text-align: center;
  .item-row {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    border-right: 1px solid rgba(224, 224, 224, 1);
  }
}
.sure {
  margin-top: 20px;
}
.late {
  color: red;
}
.normal {
  color: green;
}
.before {
  color: yellow;
}
.noCard {
  color: hotpink;
}
.mga {
  margin: 0 auto;
}
.item_title {
  background: #f1f1f1;
  padding: 10px;
  border: 1px solid #ccc;
  height: 46px;
}
.item_item {
  border: 1px solid #ccc;
}
.item_every {
  border: 1px solid #ccc;
}
.bf {
  border: 1px solid transparent;
}
</style>
